<template>
  <div class="setting-details">
    <wallet-title :title="searchTitle" />
    <l-text-rarrow :text="name" icon2="arrow" @click.native="showName = true" :distance="form.username" />
    <l-text-rarrow :text="pwd" icon2="arrow" @click.native="showPwd = true" />
    <div class="avatar">
      <div class="text-left" ref="textLeft">
      <span>修改头像</span>
    </div>
    <div class="text-right" @click.stop="uploadHeadImg">
      <div class="avatar-init">
        <div class="head_img">
          <img :src="form.avatar"/>
        </div>
      </div>
      <input type="file" name="file" accept="image/*" @change="handleFile" class="hiddenInput"/>
      <van-icon name="arrow" class="setting_right"></van-icon>
    </div>
    </div>
    <l-text-rarrow :text="titleSex" icon2="arrow" @click.native="showSex = true" />
    <l-text-rarrow :text="titleBir" icon2="arrow" @click.native="showBir = true" />
    <l-text-rarrow :text="titleEmail" icon2="arrow" @click.native="showEmail = true" />
    <!-- 用户昵称弹框 -->
    <van-dialog v-model="showName" title="修改昵称" show-cancel-button @confirm="getName">
      <div class="name-box">
        <label for="name1">旧昵称：<input v-model="form.username" id="name1"></label>
        <label for="name2">新昵称：<input v-model="form.name" id="name2"></label>
      </div>
    </van-dialog>
    <!-- 密码弹框 -->
    <van-dialog class="dialog-pwd" v-model="showPwd" title="修改密码" show-cancel-button @confirm="getPwd">
      <div class="name-box">
        <label for="pwd0">旧密码：<input type="password" v-model="form.password" id="pwd0"></label>
        <label for="pwd1">新密码：<input type="password" v-model="form.pwd" id="pwd1"></label>
        <label for="pwd2">确认密码：<input type="password" v-model="form.pwd2" id="pwd2"></label>
      </div>
    </van-dialog>
    <!-- 修改性别 -->
    <van-dialog v-model="showSex" title="修改性别" show-cancel-button @confirm="getPwd">
      <van-radio-group class="gender" v-model="radio">
        <van-radio name="男">男</van-radio>
        <van-radio name="女">女</van-radio>
      </van-radio-group>
    </van-dialog>
    <!-- 修改生日 -->
    <van-dialog v-model="showBir" title="修改生日" show-cancel-button @confirm="getBir(currentDate)">
      <van-datetime-picker
        v-model="currentDate"
        type="date"
        :min-date="minDate"
        :max-date="maxDate"
      />
    </van-dialog>
    <!-- 修改邮箱 -->
    <van-dialog v-model="showEmail" title="修改邮箱" show-cancel-button @confirm="getPwd">
      <div class="name-box">
        <label for="pwd0">邮箱：<input v-model="form.password" id="pwd0"></label>
      </div>
    </van-dialog>
  </div>
</template>
<script>
import { getUserList, updateName, updatePwd, handleSingleUpload, updateAvatar } from '../../api';
import LTextRarrow from '../../components/common/LTextRarrow.vue'
import WalletTitle from '../../components/common/WalletTitle.vue'
let vthis;
export default {
  components: { WalletTitle, LTextRarrow },
  data() {
    return {
      searchTitle: '个人信息',
      name: '修改用户昵称',
      pwd: '修改密码',
      avatarTitle: '修改头像',
      titleBir: '修改生日',
      titleSex: '修改性别',
      titleEmail: '修改邮箱',
      form: {
        username: '',
        pwd: '',
        pwd2: '',
        name: '',
        avatar: ''
      },
      showName: false,
      showPwd: false,
      showAvatar: false,
      showSex: false,
      showBir: false,
      showEmail: false,
      radio: "男",
      minDate: new Date(1970, 0, 1), // 生日
      maxDate: new Date(2022, 4, 22),
      currentDate: new Date(2022, 4, 19)
    }
  },
  created() {
    vthis = this;
  },
  mounted() {
    this.getNameList();
  },
  methods: {
    // 让上传图片可以点击
    uploadHeadImg: function () {
      this.$el.querySelector('.hiddenInput').click()
    },
    // 解析图片
    handleFile(e) {
      console.log('e', e.target.files[0]);
      let fileObject = e.target.files[0];
      let myFormData = new FormData()
      myFormData.append('file', fileObject)

      handleSingleUpload(myFormData).then(({data}) => { // 解析文件
        // this.form.avatar = data.url
        updateAvatar({
          "avatar": data.url,
          "id": vthis.$cookie.get('userId')
        }).then(({data}) => {
          getUserList({ // 将头像更新回去
            "username": vthis.$cookie.get('username')
          }).then(({data}) => {
            vthis.form.avatar = data.data[0].src
          })
        }).catch(err => console.log('err', err))
      })
    },
    // 用户对应的用户名
    getNameList() {
      getUserList({
        "username": this.$cookie.get('username')
      }).then(({data}) => {
        this.form.username = data.data[0].name;
        this.form.avatar = data.data[0].src;
      })
    },
    // 修改用户名
    getName() {
      let param = {
        "name": this.form.name,
        "username": this.$cookie.get('username')
      }
      updateName(param).then(() => {
      })
    },
    // 修改密码
    getPwd() {
      getUserList({
        "username": this.$cookie.get('username')
      }).then(({data}) => {
        let param = {
          "username": this.$cookie.get('username'),
          "password": data.data[0].password,
          "pwd": this.form.pwd,
          "pwd2": this.form.pwd2
        }
        updatePwd(param).then(() => {
        })
      })
    },
    // 修改生日
    getBir(picker) {
      console.log('picker',picker)
    }
  }
}
</script>
<style lang="scss" scoped>
.setting-details {
  .wallet-title {
    margin-bottom: 10px;
  }
  .detail-text {
    background-color: #fff !important;
    margin-bottom: 2px;
  }
}
// 昵称弹框
.name-box {
  width: 100%;
  display: flex;
  flex-flow: column wrap;
  padding: 6px 10px;
  box-sizing: border-box;
  label {
    width: 100%;
    margin-top: 8px;
    input {
      margin-left: 10px;
      padding: 2px 4px;
    }
  }
}
.dialog-pwd {
  width: 324px;
}

.avatar {
  width: 100%;
  height: 64px;
  display: flex;
  justify-content: space-between;
  border-bottom: 6px solid $bgcolor;
  padding-left: 15px;
  box-sizing: border-box;
  background-color: #fff;
  .text-left {
    width: auto;
    line-height: $height*1.5;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    .svg-icon {
      color: $color;
    }
  }
  .text-right {
    padding-right: 20px;
    box-sizing: border-box;
    font-size: 12px;
    display: flex;
    align-items: center;
    .avatar-init {
      width: 100%;
      height: 100%;
      display: flex;
      flex-flow: row wrap;
      display: flex;
      justify-content: flex-end;
      .head_img {
        width: 50px;
        height: 50px;
        margin-top: 5px;
        border-radius: 50%;
        overflow: hidden;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
}

.head_img{
 height: 90px;
}
.head_img img{
 width:90px;
 height:90px;
 border-radius:50px
}
.setting_right{
 display: flex;
 height: 37px;
 justify-content: flex-end;
 align-items: center;
}
.hiddenInput{
 display: none;
}
.caption {
 color: #8F8F8F;
 font-size: 26px;
 height: 37px;
}
.gender {
  width: 100%;
  padding: 0 60px;
  box-sizing: border-box;
  .van-radio {
    margin-bottom: 10px;
  }
}
</style>